<template>
  <view class="new-invoice" :style="my_style">
    <view class="new-invoice-form mb30">
      <view class="cell" @click="show_type = true">
        <text class="label fw">发票类型</text>
        <view class="flex-row flex1">
          <input
            type="text"
            :disabled="true"
            :value="form.invoice_type === 2 ? '增值税电子普通发票' : '增值税专用发票'"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" color="#999"></u-icon>
        </view>
      </view>
      <view class="cell" v-if="form.invoice_type === 2">
        <text class="label fw">抬头类型</text>
        <view class="flex1 flex">
          <u-radio-group v-model="form.invoice_title_type">
            <u-radio shape="circle" :name="1" :active-color="theme_color">个人</u-radio>
            <u-radio shape="circle" :name="2" :active-color="theme_color">企业</u-radio>
          </u-radio-group>
        </view>
      </view>
      <template v-if="form.invoice_title_type === 1 && form.invoice_type === 2">
        <view class="cell">
          <text class="label">发票抬头</text>
          <input
            type="text"
            maxlength="30"
            v-model="form.invoice_title"
            placeholder="请填写需开具的抬头名称，默认为“个人”"
            placeholder-style="color:#CCCCCC"
          />
        </view>
      </template>

      <template v-if="form.invoice_title_type === 2 || form.invoice_type === 1">
        <view class="cell">
          <text class="label">发票抬头</text>
          <input
            type="text"
            maxlength="30"
            v-model="form.invoice_title"
            placeholder="请填写企业抬头名称"
            placeholder-style="color:#CCCCCC"
          />
        </view>
        <view class="cell">
          <text class="label">税号</text>
          <input
            type="text"
            maxlength="30"
            v-model="form.taxpayer_number"
            placeholder="请填写企业税号"
            placeholder-style="color:#CCCCCC"
          />
        </view>
        <view class="cell">
          <text class="label">开户银行</text>
          <input
            type="text"
            maxlength="20"
            v-model="form.open_bank"
            placeholder="选填"
            placeholder-style="color:#CCCCCC"
          />
        </view>
        <view class="cell">
          <text class="label">银行账号</text>
          <input
            type="number"
            maxlength="20"
            v-model="form.bank_account"
            placeholder="选填"
            placeholder-style="color:#CCCCCC"
          />
        </view>
        <view class="cell">
          <text class="label">注册地址</text>
          <input
            type="text"
            maxlength="50"
            v-model="form.company_address"
            placeholder="选填"
            placeholder-style="color:#CCCCCC"
          />
        </view>
        <view class="cell">
          <text class="label">注册电话</text>
          <input
            type="text"
            maxlength="20"
            v-model="form.company_phone"
            placeholder="选填"
            placeholder-style="color:#CCCCCC"
          />
        </view>
      </template>
      <view class="cell u-m-t-20" v-if="form.invoice_type === 1">
        <text class="label">收票人手机号</text>
        <input
          type="number"
          v-model="form.invoice_mobile"
          maxlength="11"
          placeholder="请输入手机号（必填）"
          placeholder-style="color:#CCCCCC"
        />
      </view>
      <view class="cell" v-if="form.invoice_type === 1">
        <text class="label">所在地址</text>
        <input
          type="text"
          v-model="form.invoice_full_address"
          placeholder="请输入详细地址（必填）"
          placeholder-style="color:#CCCCCC"
        />
      </view>
      <view class="cell u-m-b-20">
        <text class="label">设置为默认抬头</text>
        <view class="flex1 u-flex-1">
          <u-checkbox v-model="is_default" size="34" :active-color="theme_color" shape="circle">
          </u-checkbox>
        </view>
      </view>
      <view class="cell">
        <text class="label">接收邮箱</text>
        <input
          type="text"
          maxlength="50"
          v-model="form.invoice_email"
          placeholder="请填写邮箱"
          placeholder-style="color:#CCCCCC"
        />
      </view>
      <!-- 发票内容 -->
      <view class="cell flex-between u-m-b-24" @click="show_content = true">
        <view class="flex">
          <text class="u-m-r-12">发票内容</text>
          <u-icon name="question-circle" color="#999" size="32"></u-icon>
        </view>
        <view class="flex">
          <u-icon
            name="icon_denglu_yixuanzex"
            custom-prefix="custom-icon"
            :color="theme_color"
            size="28"
          >
          </u-icon>
          <text class="u-m-l-8">明细</text>
        </view>
      </view>

      <!-- 删除发票 -->
      <view class="cell" v-if="id" @click="show_del = true">
        <view class="label red-color">删除发票</view>
      </view>
    </view>

    <!-- 保存 -->
    <view class="u-p-l-24 u-p-r-24 white-color font-32">
      <view class="new-invoice-btn" @click="newInvoice">保存</view>
    </view>
    <!-- 发票内容说明 -->
    <content-pop :show.sync="show_content" />
    <!-- 类型选择 -->
    <select-type
      :show.sync="show_type"
      @confirm="
        (val) => {
          form.invoice_type = +val
        }
      "
    />
    <!-- 删除弹窗 -->
    <confirm-alert
      :show.sync="show_del"
      confirmTitle="您确定要删除这个发票吗？"
      @confirm="deleteOrderInvoice"
      confirm-text="删除发票"
      cancel-text="我再想想"
    />
  </view>
</template>

<script>
  import ConfirmAlert from '@/components/common/Confirm.vue'
  import SelectType from '@/views/components/invoice/SelectType.vue'
  import ContentPop from '@/views/components/invoice/ContentPop.vue'
  export default {
    data() {
      return {
        id: '',
        type: 1,
        form: {
          invoice_type: 2, // 2 增值税电子普通发票  1增值税专用发票
          invoice_title_type: 1, // 1个人 2单位
          invoice_title: '', // 抬头
          taxpayer_number: '', // 税号
          invoice_full_address: '', // 邮寄地址
        },
        title: '发票信息',
        show_del: false, // 是否删除
        show_content: false, // 发票内容说明
        show_type: false, // 发票类型
        is_default: false, // 默认
      }
    },
    components: {
      ConfirmAlert,
      SelectType,
      ContentPop,
    },
    onLoad(options) {
      this.id = options.id || ''
      this.title = this.id ? '编辑发票信息' : '新增发票信息'
      if (this.id) {
        this.getOrderInvoiceInfo()
      }
    },
    methods: {
      // 获取发票详情
      async getOrderInvoiceInfo() {
        const { code, data } = await this.$api.common.order('getOrderInvoiceInfo', {
          invoice_id: this.id,
        })
        if (code === 200) {
          this.form = data
        }
      },
      //  新增/编辑发票信息
      async newInvoice() {
        let params = {
          set_default_title: this.is_default ? 1 : 0,
          invoice_id: this.id || '',
          ...this.form,
          invoice_content: '明细',
        }
        if (!params.invoice_title) {
          this.showMsg('请填写准确的抬头名')
          return
        }
        if (params.invoice_title_type === 2) {
          if (!params.taxpayer_number) {
            this.showMsg('请填写税号')
            return
          }
        }
        if (!params.invoice_full_address && params.invoice_type === 1) {
          this.showMsg('请填写发票邮寄地址')
          return
        }
        if (!params.invoice_mobile && params.invoice_type === 1) {
          this.showMsg('请填写收票人手机号')
          return
        }
        if (params.invoice_mobile && params.invoice_type === 1) {
          if (!this.$u.test.mobile(params.invoice_mobile)) {
            this.showMsg('请填写正确的手机号')
            return
          }
        }
        if (!params.invoice_email) {
          this.showMsg('请填写接收邮件号')
          return
        }
        if (!this.$u.test.email(params.invoice_email)) {
          this.showMsg('请填写正确的邮箱号')
          return
        }
        const res = await this.$api.common.order(
          this.id ? 'editOrderInvoice' : 'createOrderInvoice',
          params
        )
        if (res.code === 200) {
          this.showMsg(res.message)
          this.back()
        }
      },
      // 删除发票
      async deleteOrderInvoice() {
        let params = {
          invoice_id: this.id,
        }
        const res = await this.$api.common.order('deleteOrderInvoice', params)
        if (res.code === 200) {
          this.show_del = false
          this.$u.toast('删除成功')
          this.back()
        }
      },
      // 返回上一页
      back() {
        // 获取页面栈
        var pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
          // 触发上个界面
          // #ifdef H5
          prePage.refresh()
          // #endif
          // #ifdef MP-WEIXIN||APP-PLUS
          prePage.$vm.refresh()
          // #endif
        }
        uni.navigateBack()
      },
    },
  }
</script>

<style lang="scss">
  .new-invoice {
    &-form {
      .cell {
        display: flex;
        height: 100rpx;
        padding: 0 24rpx;
        background-color: #fff;
        border-bottom: 1rpx solid #e1e1e1;
        flex-direction: row;
        align-items: center;

        ::v-deep {
          .u-radio__label {
            font-size: 24rpx;
          }

          .u-checkbox {
            width: 34rpx;
          }
        }

        &:last-child {
          border-bottom: none;
        }

        .type {
          width: 130rpx;
          padding: 10rpx 0;
          color: #666;
          text-align: center;
          border: 1rpx solid #e1e1e1;
          border-radius: 8rpx;
        }

        .active {
          color: var(--color);
          border: 1rpx solid var(--color);
        }

        .label {
          width: 196rpx;
        }

        .flex1 {
          text-align: right;
          flex: 1;
          justify-content: flex-end;
        }

        input {
          font-size: 28rpx;
          text-align: right;
          flex: 1;
        }
      }
    }

    .tip {
      padding-left: 30rpx;
    }

    &-btn {
      width: 100%;
      height: 88rpx;
      margin-top: 80rpx;
      line-height: 88rpx;
      text-align: center;
      background: var(--color);
      border-radius: 210rpx;
    }
  }
</style>
